/**
 *  在外面进行状态控制的组件，这个组件本身不显示，只是用来控制 toast 的 队列的 
 * 
 */

import React, { useState } from "react";
import ToastItem from "./ToastItem";

interface IProp {
  data: number;
}

interface IChild {
  id: number;
}

let id = 1;

// 封装的时候，可以使用类组件进行 一定 的优化 ， 使用类组件的实现，进行数据传递
export default class ToastContainer extends React.Component<{}, { list: (IToast & IChild)[] }> {
  constructor(props: any) {
    super(props)
    this.state = {
      // 有一个数组，存着点击了多少次的数据，然后循环生成多个 ToastItem 组件
      list: []
    }
  }
  // 准备一个方法，用来接收，当 FuncTaost 调用时的数据传递
  create(type: ToastType, message: string) {
    this.state.list.push({ type, message, id })
    this.setState({})
    ++id;
  }
  destory(id: number) {
    // console.log('id为' + id + '的组件要销毁了');
    // 根据id找到对应的数组里面的对象，删除，更新视图
    let idx = this.state.list.findIndex(item => item.id == id);
    this.state.list.splice(idx, 1);
    this.setState({})
  }
  render(): React.ReactNode {
    let ts = document.querySelectorAll('.toast-item')
    let offset = 0;

    return <>
      {
        this.state.list.map((item, index) => {
          if (index == 0) {
            // 第一次点击
            offset = 20;
          } else {
            let last = ts[index - 1] as HTMLElement;
            // 拿到 上一个元素的高度
            let height = last.offsetHeight;
            // 计算出下一个元素的位置
            offset = height + 20 + last.offsetTop
          }
          return <ToastItem onDestroy={this.destory.bind(this)} top={offset} data={item} key={item.id} />
        })
      }
    </>
  }

}